<template>
  <el-card class="profile-info-card">
    <h3 class="card-title">个人信息</h3>
    <el-form :model="userInfo" label-width="120px" class="personal-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限等级">
            <span>{{ userInfo.isVip ? 'VIP' : '非VIP' }}</span>
            <img
                v-if="userInfo.isVip"
                src="vip-icon.png"
                alt="VIP"
                class="vip-icon"
            />
            <img
                v-else
                src="grey-vip-icon.png"
                alt="VIP"
                class="vip-icon"
                style="filter: grayscale(100%);"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="saveUserInfo">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {mapGetters} from "vuex";
import {getUserById, updateUser} from "@/api/personalInfoApi";

export default {
  name: 'PersonalInfo',
  data() {
    return {
      userInfo: {
        username: '',
        email: '',
        phone: '',
        isVip: false
      }
    };
  },
  computed: {
    ...mapGetters({
      getUser: 'user/getUser'
    })
  },
  methods: {
    fetchUserInfo() {
      const userId = this.getUser.userId;
      getUserById(userId)
          .then(response => {
            this.userInfo = response.data;
            if (response.data.roleId === 1) {
              this.userInfo.isVip = false;
            } else if (response.data.roleId === 2) {
              this.userInfo.isVip = true;
            }
          })
          .catch(error => {
            console.error('获取用户信息失败:', error);
            this.$message.error('获取用户信息失败，请稍后再试！');
          });
    },
    saveUserInfo() {
      const user = {
        userId: this.getUser.userId,
        username: this.userInfo.username,
        email: this.userInfo.email,
        phone: this.userInfo.phone,
      }
      updateUser(user)
          .then(response => {
            this.$message.success('用户信息保存成功！');
          })
          .catch(error => {
            console.error('保存用户信息失败:', error);
            this.$message.error('保存用户信息失败，请稍后再试！');
          });
    }
  },
  mounted() {
    this.fetchUserInfo();
  }
};
</script>

<style scoped>
.profile-info-card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.personal-form {
  max-width: 600px;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-input {
  width: 100%;
}

.vip-icon {
  width: 24px;
  height: 24px;
  margin-left: 10px;
  vertical-align: middle;
}
</style>